<template>
    <div>
      <div class="container">
          <p class="fast">快速导航</p>
        <div class="textarea" style="margin-top: 2vw">
          <van-row gutter="10">
            <van-col span="4"><router-link to="/home"><span>首页</span></router-link></van-col>
            <van-col span="5"><router-link to="/club"><span>社区精选</span></router-link></van-col>
            <van-col span="5"><router-link to="/selected"><span>精选好品</span></router-link></van-col>
            <van-col span="5"><router-link to="/aboutUs"><span>关于我们</span></router-link></van-col>
            <van-col span="5"><router-link to="/news"><span>新闻中心</span></router-link></van-col>
            <van-col span="24"><p style="margin-top: 1vw"></p> </van-col>
            <van-col span="8" offset="4"><router-link to="/APP"><span>APP下载</span></router-link></van-col>
            <van-col span="8"> <router-link to="/joinUs"><span>加入我们</span></router-link></van-col>
          </van-row>
        </div>
        <div class="line"></div>
        <p class="fast" style="margin-top: 5vw">联系方式</p>
        <div class="textarea" style="margin-top: 5vw;margin-bottom: 5vw">
          <van-row gutter="10" class="row" style="color: #ccc;font-size: 13px;text-align: left">
            <van-col span="12">QQ：{{way.contactqq}}</van-col>
            <van-col span="12">微信：{{way.vxnumber}}</van-col><br><br>
            <van-col span="12">微博：{{way.weibo}}</van-col>
            <van-col span="12">联系电话：{{way.tel}}</van-col><br><br>
            <van-col span="24">QQ邮箱：{{way.qqemail}}</van-col><br><br>
            <van-col span="24">网易邮箱：{{way.wyemail}}</van-col><br><br>

            <van-col span="24">地址：{{way.position}}</van-col>
          </van-row>
        </div>
        <div class="pagebottom">
          <p>Copyright&copy;2017-2021 http://www.napin.com All Rights Reserved. 纳品网数据&nbsp;&nbsp;版权所有</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "pageBottom",
      data(){
          return{
            way:[],
          }
      },
      created(){
        var that=this;
        this.$http({
          url:'/offcial/index.php/index/Acticle/GetContact',
          method:'post',
          data:{
            time:this._globe.time1,
            device_id:this._globe.device_id,
            version:this._globe.version,
            platform:this._globe.platform,
            token:this._globe.token1,
          }
        })
          .then(function (response) {
            /*console.log(response);*/
            const resData=response.data;
            if(resData.code==1){
              that.way = resData.data;
              /*console.log(that.way);*/
            }
          })
          .catch(function (response) {
            console.log(response);
          })

      },
    }
</script>

<style scoped lang="scss">
.container{
  width: 100vw;
  height: 110vw;
  overflow: hidden;
  background: #414141;
  padding-top: 6vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 8vw;
  .line{
    width: 100vw;
    height: 14px;
    border-bottom: 1px solid #ccc;
  }
    .fast{
      font-size: 15px;
      color: #fff;
    }
  .pagebottom{
    width: 100vw;
    height: 27vw;
    background: #333;
    color: #7C7C7C;
    font-size: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 2vw;
    margin-left: -3vw;
      p{
        width: 90%;
        margin: 0px auto;
      }
  }
    .textarea{
      width: 92vw;
      margin: 0px auto;
      a{
        color: #ccc;
        font-size: 12px;
      }
  }
}
@media screen and (min-width: 320px) and (max-width:375px){
  .row{
    font-size: 12px !important;
  }
  .container{
    height: 126vw !important;
  }
}
@media screen and (min-width: 320px) and (max-width:375px){
  .container{
    height: 115vw !important;
  }
}
</style>
